@extends('layouts.home')
@section('content')
    <div class="blog-body">
        <style>
            .remark-list {
                min-height: 445px;
            }

            .remark-list li {
                position: relative;
                min-height: 50px;
                margin: 5px 0;
            }

            .remark-list li .user-avator {
                padding: 2px;
                border: 1px solid #ddd;
                position: absolute;
            }

            .remark-list li .remark-content {
                margin-left: 60px;
                border: 1px solid #efefef;
                height: 46px;
                padding: 5px 8px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                font-size: 12px;
                overflow: hidden;
                line-height: 18px;
                background-color: #efefef;
                color: #666;
            }

            .remark-list .avatar {
                width: 40px;
                height: 40px;
            }

            .remark-list li .remark-content::after {
                content: "";
                border: 10px solid rgba(255, 255, 255, 0.00);
                border-bottom: 8px solid rgba(255, 255, 255, 0.00);
                border-top: 8px solid rgba(255, 255, 255, 0.00);
                border-right-color: #efefef;
                position: absolute;
                top: 12px;
                left: 42px;
                display: block;
            }
        </style>
        <div class="layui-container">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="home-tips shadow">
                        <i style="float:left;line-height:17px;" class="fa fa-volume-up"></i>
                        <div class="home-tips-container">
                            @foreach($notices as $notice)
                            <span style="color: {{$notice->status==1 ? 'red': '#009688'}}">{{$notice->content}}</span>
                            @endforeach
                        </div>
                    </div>
                </div>
                <!--左边文章列表-->
                <div class="layui-col-md8">
                    <div class="left-box shadow" style="padding:5px;background-color:#fff;">
                        <div class="carousel-box" style="position:relative;background-color: #fff;overflow:hidden">
                            <div style="width:200%" class="banner">
                                <ul>
                                    <li style="width:0%">
                                        <a href="#" target="_blank">
                                            <img src="https://img0.baidu.com/it/u=2906969158,243229907&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=250"/>
                                            <p>
                                                背景</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="left-box">
                        <p class="left-box-title shadow"><i class="fa fa-diamond fa-fw" aria-hidden="true"></i>置顶博文</p>
                        @foreach($top_article as $item=>$value)
                            <div class="article shadow clearfix sr-listshow">
                                <div class="article-left">
                                    <img src="{{$value->cover}}"
                                         alt="{{$value->title}}"/>
                                </div>
                                <div class="article-right">
                                    <div class="article-title">
                                        <a href="/article/detail/{{$value->id}}">{{$value->title}}</a>
                                    </div>
                                    <div class="article-abstract">
                                        {{$value->keywords}}
                                    </div>
                                    <div class="article-footer">
                                        @foreach($value->tags as $item1=>$value1)
                                            <span class="layui-hide-xs"><i class="fa fa-tag" aria-hidden="true"></i>&nbsp;<a
                                                        style="color:#009688"
                                                        href="/tag/{{$value1->id}}">{{$value1->name}}</a></span>
                                        @endforeach
                                        <span><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;{{$value->created_at}}</span>
                                        <span class="article-viewinfo">{{$value->click}}阅读</span>
                                        <span class="article-viewinfo">{{$value->comments_count}}评论</span>
                                        <span class="article-viewinfo">{{$value->zans_count}}赞</span>
                                        <a class="read layui-btn layui-btn-xs layui-btn-normal layui-hide-xs"
                                           href="/article/detail/{{$value->id}}"
                                           title="阅读全文：{{$value->title}}">阅读全文</a>
                                    </div>
                                </div>

                                @if($value->openness==1)
                                    <div class="flag flag-left">推荐</div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                    <div class="left-box">
                        <p class="left-box-title shadow sr-listshow"><i class="fa fa-signal fa-fw"
                                                                        aria-hidden="true"></i>最新博文
                        </p>
                        @foreach($article as $item2=>$value2)
                            <div class="article shadow clearfix sr-listshow">
                                <div class="article-left">
                                    <img src="{{$value2->cover}}"
                                         alt="{{$value2->title}}"/>
                                </div>
                                <div class="article-right">
                                    <div class="article-title">
                                        <a href="/article/detail/{{$value2->id}}"
                                           title="{{$value2->title}}">{{$value2->title}}</a>
                                    </div>
                                    <div class="article-abstract">
                                        {{$value2->keywords}}
                                    </div>
                                    <div class="article-footer">
                                        @foreach($value2->tags as $item3=>$value3)
                                            <span class="layui-hide-xs"><i class="fa fa-tag" aria-hidden="true"></i>&nbsp;<a
                                                        style="color:#009688"
                                                        href="/tag/{{$value3->id}}">{{$value3->name}}</a></span>
                                        @endforeach
                                        <span><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;{{$value2->created_at}}</span>
                                        <span class="article-viewinfo">{{$value2->click}}阅读</span>
                                        <span class="article-viewinfo">{{$value2->comments_count}}评论</span>
                                        <span class="article-viewinfo">{{$value2->zans_count}}赞</span>
                                        <a class="read layui-btn layui-btn-xs layui-btn-normal layui-hide-xs"
                                           href="/article/detail/{{$value2->id}}"
                                           title="阅读全文：{{$value2->title}}">阅读全文</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        {{ $article->links() }}
                    </div>
                </div>
                <!--右边小栏目-->
                <div class="layui-col-md4">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-sm12 layui-col-md12">
                            <div class="blogerinfo shadow">
                                <div class="blogerinfo-figure">
                                    <img src="/favicon.ico" alt="agoni"/>
                                </div>
                                <div class="blogerinfo-info">
                                    <p class="blogerinfo-nickname">Agoni</p>
                                    <p class="blogerinfo-introduce">一枚90后程序员，全栈开发工程师。</p>
                                    <p class="blogerinfo-location"><i class="fa fa-location-arrow"></i>&nbsp;浙江 - 温州</p>
                                </div>
                                <div class="blogerinfo-contact">
                                    <a target="_blank" title="QQ交流"
                                       href="http://wpa.qq.com/msgrd?v=3&uin=544867814&site=qq&menu=yes"><i
                                                class="fa fa-qq fa-2x"></i></a>
                                    <a target="_blank" title="给我写信"
                                       href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=BTAxMT0zMj00MUV0dCtmamg"
                                       style="text-decoration:none;"><i class="fa fa-envelope fa-2x"></i></a>
                                    <a target="_blank" title="新浪微博" href="#"><i
                                                class="fa fa-weibo fa-2x"></i></a>
                                    <a target="_blank" title="GitHub"
                                       href="https://github.com/544867814?tab=projects"><i
                                                class="fa fa-github fa-2x"></i></a>
                                </div>
                                <div class="bloginfo-statistics">
                                    <div class="item">
                                        <span><a href="/article/all">{{$article_count}}</a></span>
                                        <p>博文</p>
                                    </div>
                                    <div class="item">
                                        <span><a href="/timeline">{{count($timeLines) ?? 0}}</a></span>
                                        <p>细语</p>
                                    </div>
                                    <div class="item">
                                        <span>{{$comment_count}}</span>
                                        <p>评论</p>
                                    </div>
                                    <div class="item">
                                        <span>{{$message_count}}</span>
                                        <p>留言</p>
                                    </div>
                                </div>
                                <div class="bloginfo-runtime"><i class="fa fa-spinner fa-spin"></i></div>
                            </div>
                        </div>
                        <div class="layui-col-sm6 layui-col-md12">
                            <div class="blog-card shadow">
                                <div class="blog-card-title">
                                    <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe756;</i></span>
                                    <span class="text">热文排行</span>
                                </div>
                                <ul class="blog-card-ul">
                                    @foreach($hot_article as $item5=>$value5)
                                        <li>
                                            <span class="layui-badge {{($item5+1)>3?"layui-bg-blue":''}}">{{$item5+1}}</span><a
                                                    href="/article/detail/{{$value5->id}}"
                                                    title="{{$value5->title}}">{{$value5->title}}</a>
                                        </li>
                                    @endforeach
                                    {{--<li>--}}
                                    {{--<span class="layui-badge ">2</span><a href="/article/detail/31"--}}
                                    {{--title="&#x90AE;&#x6211;&#x7EC4;&#x4EF6; - &#x7528;&#x6237;&#x70B9;&#x51FB;&#x5373;&#x53EF;&#x53D1;&#x9001;&#x90AE;&#x4EF6;">&#x90AE;&#x6211;&#x7EC4;&#x4EF6;--}}
                                    {{--- &#x7528;&#x6237;&#x70B9;&#x51FB;&#x5373;&#x53EF;&#x53D1;&#x9001;&#x90AE;&#x4EF6;</a>--}}
                                    {{--</li>--}}
                                    {{--<li>--}}
                                    {{--<span class="layui-badge ">3</span><a href="/article/detail/34"--}}
                                    {{--title="&#x7EAF;CSS&#x5B9E;&#x73B0;&#x6587;&#x7AE0;&#x5DE6;&#x4E0A;&#x89D2;Flag&#x6807;&#x7B7E;">&#x7EAF;CSS&#x5B9E;&#x73B0;&#x6587;&#x7AE0;&#x5DE6;&#x4E0A;&#x89D2;Flag&#x6807;&#x7B7E;</a>--}}
                                    {{--</li>--}}
                                    {{--<li>--}}
                                    {{--<span class="layui-badge layui-bg-blue">4</span><a href="/article/detail/30"--}}
                                    {{--title="&#x540E;&#x53F0;&#x53EF;&#x4EE5;&#x7BA1;&#x7406;&#x6587;&#x7AE0;&#x4E86;&#xFF0C;&#x63A5;&#x4E0B;&#x6765;&#x5F00;&#x59CB;&#x505A;&#x535A;&#x5BA2;&#x524D;&#x53F0;&#x3002;">&#x540E;&#x53F0;&#x53EF;&#x4EE5;&#x7BA1;&#x7406;&#x6587;&#x7AE0;&#x4E86;&#xFF0C;&#x63A5;&#x4E0B;&#x6765;&#x5F00;&#x59CB;&#x505A;&#x535A;&#x5BA2;&#x524D;&#x53F0;&#x3002;</a>--}}
                                    {{--</li>--}}
                                    {{--<li>--}}
                                    {{--<span class="layui-badge layui-bg-blue">5</span><a href="/article/detail/5"--}}
                                    {{--title="ASP.NET Core&#x4E2D;&#x95F4;&#x4EF6;">ASP.NET--}}
                                    {{--Core&#x4E2D;&#x95F4;&#x4EF6;</a>--}}
                                    {{--</li>--}}
                                    {{--<li>--}}
                                    {{--<span class="layui-badge layui-bg-blue">6</span><a href="/article/detail/33"--}}
                                    {{--title="&#x65B0;&#x529F;&#x80FD;&#x4E0A;&#x7EBF; - &#x535A;&#x6587;&#x6253;&#x8D4F;&#xFF08;&#x7F51;&#x7AD9;&#x5206;&#x4EAB;&#x7EC4;&#x4EF6;&#x63A8;&#x8350;&#xFF09;">&#x65B0;&#x529F;&#x80FD;&#x4E0A;&#x7EBF;--}}
                                    {{--- &#x535A;&#x6587;&#x6253;&#x8D4F;&#xFF08;&#x7F51;&#x7AD9;&#x5206;&#x4EAB;&#x7EC4;&#x4EF6;&#x63A8;&#x8350;&#xFF09;</a>--}}
                                    {{--</li>--}}
                                    {{--<li>--}}
                                    {{--<span class="layui-badge layui-bg-blue">7</span><a href="/article/detail/32"--}}
                                    {{--title="&#x65B0;&#x529F;&#x80FD;&#x4E0A;&#x7EBF; - &#x535A;&#x6587;&#x914D;&#x4E50;&#xFF08;&#x7F51;&#x9875;&#x97F3;&#x4E50;&#x64AD;&#x653E;&#x5668;&#x63A8;&#x8350;&#xFF09;">&#x65B0;&#x529F;&#x80FD;&#x4E0A;&#x7EBF;--}}
                                    {{--- &#x535A;&#x6587;&#x914D;&#x4E50;&#xFF08;&#x7F51;&#x9875;&#x97F3;&#x4E50;&#x64AD;&#x653E;&#x5668;&#x63A8;&#x8350;&#xFF09;</a>--}}
                                    {{--</li>--}}
                                    {{--<li>--}}
                                    {{--<span class="layui-badge layui-bg-blue">8</span><a href="/article/detail/36"--}}
                                    {{--title="&#x5C0F;&#x7A0B;&#x5E8F;&#x9ED1;&#x79D1;&#x6280;&#x4E4B;&#x83B7;&#x53D6;&#x624B;&#x673A;&#x53F7;&#x7801;&#x3001;&#x901A;&#x8BAF;&#x5730;&#x5740;&#x3001;&#x5730;&#x7406;&#x4F4D;&#x7F6E;">&#x5C0F;&#x7A0B;&#x5E8F;&#x9ED1;&#x79D1;&#x6280;&#x4E4B;&#x83B7;&#x53D6;&#x624B;&#x673A;&#x53F7;&#x7801;&#x3001;&#x901A;&#x8BAF;&#x5730;&#x5740;&#x3001;&#x5730;&#x7406;&#x4F4D;&#x7F6E;</a>--}}
                                    {{--</li>--}}
                                </ul>
                            </div>
                        </div>
                        <div class="layui-col-sm6 layui-col-md12">
                            <div class="blog-card shadow sr-rightmodule">
                                <div class="blog-card-title">
                                    <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe6c6;</i></span>
                                    <span class="text">作者推荐</span>
                                </div>
                                <ul class="blog-card-ul">
                                    @foreach($author_article as $item7=>$value7)
                                        <li>
                                            <span class="layui-badge" {{($item7+1)>=3?'layui-bg-blue':''}}>{{$item7+1}}</span><a
                                                    href="/article/detail/{{$value7->id}}"
                                                    title="{{$value7->title}}">{{$value7->title}}</a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        @if(false)
                            <div class="layui-col-sm6 layui-col-md12">
                                <div class="blog-card shadow sr-rightmodule">
                                    <div class="blog-card-title">
                                        <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe611;</i></span>
                                        <span class="text">最新评论</span>
                                    </div>
                                    <ul class="blog-card-padding remark-list">
                                        @foreach($comment as $comment_value)
                                            <li>
                                                <div data-name="{{$comment_value->users->name}}"
                                                     class="user-avator remark-user-avator">
                                                    <img class="avatar" src="{{$comment_value->users->avatar}}"
                                                         alt="{{$comment_value->users->name}}"/>
                                                </div>
                                                <a title="点击查看" href="/article/detail/{{$comment_value->article_id}}">
                                                    <div class="remark-content">
                                                        {{$comment_value->content}}
                                                        {{--<img class="avatar" src="http://www.leo96.com/lib/layui/images/face/4.gif" alt="[可怜]">hhh--}}
                                                    </div>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif

                        @if(false)
                            <div class="layui-col-sm6 layui-col-md12">
                                <div class="blog-card shadow sr-rightmodule">
                                    <div class="blog-card-title">
                                        <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe645;</i></span>
                                        <span class="text">最新留言</span>
                                    </div>
                                    <ul class="blog-card-padding remark-list">
                                        @foreach($message as $message_value)
                                            <li>
                                                <div data-name="&#x683C;&#x5F0F;&#x5316;&#x8BB0;&#x5FC6;"
                                                     class="user-avator remark-user-avator">
                                                    <img class="avatar" src="{{$message_value->users->avatar}}"
                                                         alt="{{$message_value->users->name}}"/>
                                                </div>
                                                <a title="点击前往留言板" href="/comment">
                                                    <div class="remark-content">
                                                        {{$message_value->title}}
                                                    </div>
                                                </a>
                                            </li>
                                        @endforeach
                                        <li>
                                            <div data-name="&#x6211;&#x53EA;&#x7231;&#x81EA;&#x5DF1;"
                                                 class="user-avator remark-user-avator">
                                                <img src="http://thirdqq.qlogo.cn/qqapp/101460869/A4CA1C9CF26F2FAA6100981BF7742CA0/40"
                                                     alt="&#x6211;&#x53EA;&#x7231;&#x81EA;&#x5DF1;"/>
                                            </div>
                                            <a title="点击前往留言板" href="/comment">
                                                <div class="remark-content">
                                                    <p>博主 ，你的后台使用的什么？ 能开源吗？拜托了</p>
                                                    <div><br></div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <div data-name="486" class="user-avator remark-user-avator">
                                                <img src="http://thirdqq.qlogo.cn/qqapp/101460869/F286E903C9F88FAC6B3AFA39DA33AC8F/40"
                                                     alt="486"/>
                                            </div>
                                            <a title="点击前往留言板" href="/comment">
                                                <div class="remark-content">
                                                    <p style="text-align: right;">后台直接用你的模板感觉不错<img
                                                                src="http://www.leo96.com/lib/layui/images/face/1.gif"
                                                                alt="[嘻嘻]"></p>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <div data-name="Adolph~l" class="user-avator remark-user-avator">
                                                <img src="http://thirdqq.qlogo.cn/qqapp/101460869/A5A59C075C9AE498F7BCF6A727530201/40"
                                                     alt="Adolph~l"/>
                                            </div>
                                            <a title="点击前往留言板" href="/comment">
                                                <div class="remark-content">
                                                    可以，有后台参考吗
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <div data-name="&#x591C;&#x671B;" class="user-avator remark-user-avator">
                                                <img src="http://thirdqq.qlogo.cn/qqapp/101460869/7075B682447C380E53DC78BC632E0C06/40"
                                                     alt="&#x591C;&#x671B;"/>
                                            </div>
                                            <a title="点击前往留言板" href="/comment">
                                                <div class="remark-content">
                                                    大神，哪里可以得到你前端源码
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <div data-name="&#x96BE;&#x5FF5;&#x7684;&#x7ECF;"
                                                 class="user-avator remark-user-avator">
                                                <img src="http://thirdqq.qlogo.cn/qqapp/101460869/FE50318003CAEBE25D465F7E5D36BD4D/40"
                                                     alt="&#x96BE;&#x5FF5;&#x7684;&#x7ECF;"/>
                                            </div>
                                            <a title="点击前往留言板" href="/comment">
                                                <div class="remark-content">
                                                    博主最近沉迷逆水寒<img src="http://www.leo96.com/lib/layui/images/face/5.gif"
                                                                  alt="[挖鼻]">
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <div data-name="&#x5927;&#x767D;" class="user-avator remark-user-avator">
                                                <img src="http://thirdqq.qlogo.cn/qqapp/101460869/CFB2631E2B6D4EF8328D80BE831F6A1B/40"
                                                     alt="&#x5927;&#x767D;"/>
                                            </div>
                                            <a title="点击前往留言板" href="/comment">
                                                <div class="remark-content">
                                                    防守打法按时发斯蒂芬水电费sad说的发多少
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <div data-name="&#x5927;&#x767D;" class="user-avator remark-user-avator">
                                                <img src="http://thirdqq.qlogo.cn/qqapp/101460869/CFB2631E2B6D4EF8328D80BE831F6A1B/40"
                                                     alt="&#x5927;&#x767D;"/>
                                            </div>
                                            <a title="点击前往留言板" href="/comment">
                                                <div class="remark-content">
                                                    单方事故
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        @endif
                        <div class="layui-col-sm6 layui-col-md12">
                            <div class="blog-card shadow sr-rightmodule">
                                <div class="blog-card-title">
                                    <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe609;</i></span>
                                    <span class="text">一路走来</span>
                                </div>
                                <ul style="padding:15px 15px 0px 20px;" class="layui-timeline">
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe65e;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">2018年04月09日</h3>
                                            <p>新增博文打赏功能。</p>
                                        </div>
                                    </li>
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe6fc;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">2018年04月07日</h3>
                                            <p>新增博文配乐功能。</p>
                                        </div>
                                    </li>
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe60e;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">2018年03月01日</h3>
                                            <p>不言弃2.0项目启动</p>
                                        </div>
                                    </li>
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe60e;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">2017年03月09日</h3>
                                            <p>不言弃1.0基本正式上线！</p>
                                        </div>
                                    </li>
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe612;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">2017年02月25日</h3>
                                            <p>新增QQ登陆功能。</p>
                                        </div>
                                    </li>
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe60e;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">2017年02月18日</h3>
                                            <p>不言弃1.0项目启动</p>
                                        </div>
                                    </li>
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe643;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <div class="layui-timeline-title">回忆太多，伤神！</div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="layui-col-sm6 layui-col-md12">
                            <div class="blog-card shadow sr-rightmodule" data-scroll-reveal>
                                <div class="blog-card-title">
                                    <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe64c;</i></span>
                                    <span class="text">友情链接</span>
                                </div>
                                <ul class="blogroll">
                                    @foreach($friendshiplink as $friendshiplink_i=> $friendshiplink_item)
                                        <li><a target="_blank" href="{{$friendshiplink_item->href}}"
                                               title="{{$friendshiplink_item->name}}">{{$friendshiplink_item->name}}</a>
                                        </li>
                                    @endforeach

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <script src="/lib/layui/layui.js?v=Q4hfA5tL6flbhH6c-jlA6yVJRpZRgzEJ43xJxeRS3Ps"></script>
        <script src="/js/homepage.min.js?v=w9rEI1Vs6SM2h8PvxII6Vdfj_YecOepRe2r1Ry38BTA"></script>


    </div>
@endsection